<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue组件-8 作用域slot 插槽</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!--如下是根组件的视图模板-->
    <div id="app">
        <!--如下显示的是根组件的message-->
        <my-com>{{message}}</my-com>

        <!--如果想要使用子组件的数据,需要作用域插槽-->
        <my-com>
            <!--
                插槽对应的模板中添加template标签,添加scope属性
                scope: 作用域;指定template中用到的数据属性;
                这个对象中的内容来源于slot开始标签中添加的属性
            -->
            <template scope="props">
                <span>
                {{props.mes}}---{{props.age}}
                </span>
            </template>

        </my-com>
    </div>

    <script>
        Vue.component('my-com', {
            // 如下, 是子组件的视图模版,使用的数据从子组件中获取
            template: `<div>
                            <h2>这是我的自定义组件</h2>
                            <p> 这个是注释: 在slot中添加属性,用于将数据传递到插槽对应的视图中</p>
                            <p><slot :mes="message" :age="age"></slot></p>
                        </div>`,
            data: function () {
                return {
                    message: '自定义组件的message',
                    age:23,
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                message: '根组件的message',
            }
        })
    </script>
</body>

</html>